<template>
  <view class="content">
	  <view style="z-index: 999;">
	  		<u-loading-page loading-text="名片创建中..." bg-color="#e8e8e8" :loading="loadState"></u-loading-page>
	  	</view>
    <!-- 基础信息 -->
    <view class="businessBox" style="padding-bottom: 32rpx;">
      <view class="businessTitle">
        基础信息
      </view>
      <view class="businessItem oneBusinessItem">
        <view class="lable">
          抖音昵称<span class="red">*</span>
        </view>
        <view class="rBox">
          <u--input style="width: 400rpx;" placeholder="请输入抖音昵称" border="none" v-model="create_card.dy_nickname"
            fontSize="28rpx" placeholderStyle="font-size: 28rpx;color: rgba(0,0,0,0.4);" inputAlign="right"></u--input>
        </view>
      </view>

      <view class="businessItem" @tap='showCityPicker()'>
        <view class="lable">
          城市
        </view>
        <view class="rBox">
          <span v-if="!create_card.province" style="color: rgba(0,0,0,0.4);">请选择城市</span>
          <span v-else>{{create_card.province}}-{{create_card.city}}-{{create_card.area}}</span>
          <image class="rightFillImg" src="../../static/img/rightFill.png" mode=""></image>
        </view>
      </view>
      <view class="businessItem">
        <view class="lable">
          性别
        </view>
        <view class="rBox">
          <view class="" @tap="create_card.gender = 1" style="margin-right: 10rpx;">
            <image v-if="create_card.gender == 2" class="radioImg" src="../../static/img/radio.png" mode=""></image>
            <image v-else class="radioImg" src="../../static/img/radio1.png" mode=""></image>
            男
          </view>
          <view class="" @tap="create_card.gender = 2">
            <image v-if="create_card.gender == 1" class="radioImg" src="../../static/img/radio.png" mode=""></image>
            <image v-else class="radioImg" src="../../static/img/radio1.png" mode=""></image>
            女
          </view>
        </view>
      </view>
      <view class="businessItem">
        <view class="lable">
          抖音ID<span class="red">*</span>
        </view>
        <view class="rBox">
          <u--input placeholder="请输入抖音ID" border="none" v-model="create_card.dy_id" fontSize="28rpx"
            placeholderStyle="font-size: 28rpx;color: rgba(0,0,0,0.4);" inputAlign="right"></u--input>
        </view>
      </view>
      <view class="businessItem">
        <view class="lable">
          抖音UID
        </view>
        <view class="rBox">
          <u--input placeholder="请输入抖音UID" border="none" v-model="create_card_detail.dy_uid" fontSize="28rpx"
            placeholderStyle="font-size: 28rpx;color: rgba(0,0,0,0.4);" inputAlign="right"></u--input>
        </view>
      </view>
      <view class="businessItem">
        <view class="lable">
          粉丝量<span class="red">*</span>
        </view>
        <view class="rBox">
          <u--input placeholder="请输入粉丝量" border="none" v-model="create_card.fans_num" fontSize="28rpx"
            placeholderStyle="font-size: 28rpx;color: rgba(0,0,0,0.4);" inputAlign="right"></u--input>
        </view>
      </view>
      <view class="businessItem" @tap="grade(1)">
        <view class="lable">
          带货力等级<span class="red">*</span>
        </view>
        <view class="rBox">
          <span style="color: rgba(0,0,0,0.4);">{{sales_level}}</span>
          <image class="rightFillImg" src="../../static/img/rightFill.png" mode=""></image>
        </view>
      </view>
      <view class="businessItem" @tap="grade(2)">
        <view class="lable">
          内容力等级<span class="red">*</span>
        </view>
        <view class="rBox">
          <span style="color: rgba(0,0,0,0.4);">{{content_level}}</span>
          <image class="rightFillImg" src="../../static/img/rightFill.png" mode=""></image>
        </view>
      </view>
      <view class="businessItem">
        <view class="lable">
          主页链接<span class="red">*</span>
        </view>
        <view class="rBox">
          <u--input placeholder="仅填写无文字链接" border="none" v-model="create_card_detail.home_url" fontSize="28rpx"
            placeholderStyle="font-size: 28rpx;color: rgba(0,0,0,0.4);" inputAlign="right"></u--input>
        </view>
      </view>
      <!-- 达人卡片 -->
      <view class="shopBox" style="margin-top: 24rpx;padding: 0;">
        <view class="shopCard">
          <view class="shopCardItem">
            <view class="lable">
              达人联系方式<span class="red">*</span>
            </view>
            <view class="rBox">
              <u--input placeholder="请输入联系方式" border="none" v-model="create_card_detail.phone" fontSize="28rpx"
                placeholderStyle="font-size: 28rpx;color: rgba(0,0,0,0.4);" inputAlign="right"></u--input>
            </view>
          </view>
          <view class="shopCardItem" style="border: none;">
            <view class="lable">
              是否公开
            </view>
            <view class="rBox" style="font-size: 24rpx;">
              <span style="color: rgba(0,0,0,0.4);">不公开仅达人报名后可见</span>
              <u-switch v-model="value" activeColor="#7D81A9" inactiveColor="rgba(0,0,0,0.1)" @change="asyncChangeTwo"
                space="2"></u-switch>
              <span style="width: 72rpx;text-align: right;">{{msg}}</span>
            </view>
          </view>
        </view>
      </view>
      <view class="askBox">
        <view class="askTitle">
          简介
        </view>
        <textarea v-model="create_card_detail.detail" class="txt_word" placeholder="内容简介"
          placeholder-style="font-size:24rpx;color: rgba(0,0,0,0.3);" maxlength="100" count></textarea>
      </view>
    </view>

    <!-- 带货信息 -->
    <view class="businessBox" style="padding-bottom: 32rpx;">
      <view class="businessTitle">
        带货信息
      </view>

      <view class="businessItem oneBusinessItem" :class="{ewm : isOneQrCode}" @tap="upImg(1)">
        <view class="lable">
          粉丝画像
        </view>
        <view class="rBox">
          <span style="color: rgba(0,0,0,0.4);" v-if="!create_card_detail.fans_img_url">创作者中心-粉丝中心 截图</span>
          <image v-if="!create_card_detail.fans_img_url" class="addimg" src="../../static/img/add1.png" mode=""></image>
          <image style="width: 136rpx;height: 136rpx;" v-if="create_card_detail.fans_img_url"
            :src="create_card_detail.fans_img_url" mode=""></image>
        </view>
      </view>
      <view class="businessItem oneBusinessItem" :class="{ewm : isTwoQrCode}" @tap="upImg(2)">
        <view class="lable">
          带货力等级
        </view>
        <view class="rBox">
          <span style="color: rgba(0,0,0,0.4);" v-if="!create_card_detail.sales_level_img">请点击上传截图</span>
          <image v-if="!create_card_detail.sales_level_img" class="addimg" src="../../static/img/add1.png" mode="">
          </image>
          <image style="width: 136rpx;height: 136rpx;" v-if="create_card_detail.sales_level_img"
            :src="create_card_detail.sales_level_img" mode=""></image>
        </view>
      </view>
      <view class="businessItem oneBusinessItem" :class="{ewm : isThreeQrCode}" @tap="upImg(3)">
        <view class="lable">
          内容力等级
        </view>
        <view class="rBox">
          <span style="color: rgba(0,0,0,0.4);" v-if="!create_card_detail.content_level_img">请点击上传截图</span>
          <image v-if="!create_card_detail.content_level_img" class="addimg" src="../../static/img/add1.png" mode="">
          </image>
          <image style="width: 136rpx;height: 136rpx;" v-if="create_card_detail.content_level_img"
            :src="create_card_detail.content_level_img" mode=""></image>
        </view>
      </view>
      <view class="businessItem" @tap="contentFormShowBtn(1)">
        <view class="lable">
          擅长内容形式
        </view>
        <view class="rBox">
          <span style="color: rgba(0,0,0,0.4);">{{content_type_name}}</span>
          <image class="rightFillImg" src="../../static/img/rightFill.png" mode=""></image>
        </view>
      </view>
      <view class="businessItem" @tap="categoryShow = true">
        <view class="lable">
          优势品类
        </view>
        <view class="rBox">
          <span style="color: rgba(0,0,0,0.4);">{{category_name}}</span>
          <image class="rightFillImg" src="../../static/img/rightFill.png" mode=""></image>
        </view>
      </view>
      <view class="askBox">
        <view class="askTitle">
          优秀案例
        </view>
        <u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
          :maxCount="1"></u-upload>
        <view class="" style="font-size: 24rpx;color: rgba(0,0,0,0.4);">
          请上传优秀案例截图<br />JPG/JPEG/PNG 格式上传，大小不得超过5M
        </view>
      </view>
    </view>

    <!-- 接单标准 -->
    <view class="businessBox" style="padding-bottom: 32rpx;">
      <view class="businessTitle">
        接单标准
      </view>
      <view class="businessItem" @tap="contentFormShowBtn(2)">
        <view class="lable">
          内容形式
        </view>
        <view class="rBox">
          <span style="color: rgba(0,0,0,0.4);">{{accept_content_type_name}}</span>
          <image class="rightFillImg" src="../../static/img/rightFill.png" mode=""></image>
        </view>
      </view>
      <view class="businessItem">
        <view class="lable" style="width: 200rpx;">
          服务费标准
        </view>
        <view class="rBox">
			<view class="rBox">
			  <u-input placeholder="请输入服务费" border="none" v-if="create_card_detail.service_price != '0'"
				v-model="create_card_detail.service_price" fontSize="28rpx"
				placeholderStyle="font-size: 28rpx;color: rgba(0,0,0,0.4);" inputAlign="right"></u-input>
			  <image style="margin-left: 66rpx;" v-if="!create_card_detail.service_price" class="radioImg"
				src="../../static/img/radio.png" mode="" @tap="create_card_detail.service_price = '0'"></image>
			  <image style="margin-left: 66rpx;" v-if="create_card_detail.service_price&&create_card_detail.service_price=='0'"
				class="radioImg" src="../../static/img/radio1.png" mode="" @tap="create_card_detail.service_price = ''"></image>
			  <span v-if="create_card_detail.service_price == '0' || !create_card_detail.service_price">接受议价</span>
			</view>
        </view>
      </view>
      <view class="businessItem">
        <view class="lable" style="width: 350rpx;">
          视频可修改次数
        </view>
        <view class="rBox">
          <u-input placeholder="请输入修改次数" border="none" v-if="create_card_detail.video_num != '0'"
            v-model="create_card_detail.video_num" fontSize="28rpx"
            placeholderStyle="font-size: 28rpx;color: rgba(0,0,0,0.4);" inputAlign="right"></u-input>
          <image style="margin-left: 66rpx;" v-if="!create_card_detail.video_num" class="radioImg"
            src="../../static/img/radio.png" mode="" @tap="create_card_detail.video_num = '0'"></image>
          <image style="margin-left: 66rpx;" v-if="create_card_detail.video_num&&create_card_detail.video_num=='0'"
            class="radioImg" src="../../static/img/radio1.png" mode="" @tap="create_card_detail.video_num = ''"></image>
          <span v-if="create_card_detail.video_num == '0' || !create_card_detail.video_num">不限</span>
        </view>
      </view>
      <view class="businessItem">
        <view class="lable">
          佣金
        </view>
        <view class="rBox">
          <u--input placeholder="请输入佣金金额" border="none" v-model="create_card_detail.price" fontSize="28rpx"
            placeholderStyle="font-size: 28rpx;color: rgba(0,0,0,0.4);" inputAlign="right"></u--input>
        </view>
      </view>
      <view class="businessItem">
        <view class="lable">
          备注
        </view>
        <view class="rBox">
          <u--input placeholder="请输入您要备注的信息" border="none" v-model="create_card_detail.remark" fontSize="28rpx"
            placeholderStyle="font-size: 28rpx;color: rgba(0,0,0,0.4);" inputAlign="right"></u--input>
        </view>
      </view>

    </view>

    <!-- 底部按钮区域 -->
    <view class="bottomBox">
      <view class="bottomTitle">
        创建过程中有任何问题，请在个人中心咨询我的客服。
      </view>
      <view class="btns">
        <view class="deleteBtn" @tap="shanchushow = true">
          删除
        </view>
        <view class="confirmBtn" @tap="createCardBtn">
          确认
        </view>
      </view>
    </view>
    <!-- 省市区三级选择器 -->
    <mpvue-city-picker ref="mpvueCityPicker" :pickerValueDefault="pickerValueDefault"
      @onConfirm="onConfirm"></mpvue-city-picker>

    <!-- 选择品类弹出框 -->
    <u-popup :round="10" :show="categoryShow" closeable @close="categoryShowClose">
      <view class="categoryShowContent">
        <view class="" style="font-size: 32rpx;font-weight: 550;">
          请选择品类
          <span style="font-size: 24rpx;color: rgba(0,0,0,0.4);margin-left: 16rpx;">单选</span>
        </view>
        <view class="categoryList">
          <view class="categoryItem" :class="{active : item.flag}" v-for="(item,i) in categoryList" :key="i"
            @tap="selectTag(item)">
            {{item.category_name}}
          </view>
        </view>
        <view class="categoryBtns">
          <view class="categoryBtnL" @tap="categoryShowClose">
            取消
          </view>
          <view class="categoryBtnR" @tap="category">
            确认
          </view>
        </view>
      </view>
    </u-popup>
    <!-- 等级选择器 -->
    <u-picker :show="gradeShow" :columns="gradeColumns" keyName="label" @confirm="gradeConfirm"
      @cancel="gradeShow = false"></u-picker>
    <!-- 删除弹框 -->
    <u-modal :show="shanchushow" style="text-align: center;" confirmText="同意" cancelText="不同意" showCancelButton
      cancelColor="#1D2129" confirmColor="#7D81A9" @cancel="shanchushow = false" close @confirm="shanchu">
      是否同意?
    </u-modal>
    <!-- 内容形式弹出框 -->
    <u-popup :round="10" :show="contentFormShow" closeable @close="contentFormShowClose">
      <view class="categoryShowContent">
        <view class="" style="font-size: 32rpx;font-weight: 550;">
          请选择内容形式
          <!-- <span style="font-size: 24rpx;color: rgba(0,0,0,0.4);margin-left: 16rpx;">单选</span> -->
        </view>
        <view class="categoryList">
          <view class="categoryItem" :class="{active : item.flag}" v-for="(item,i) in content_data" :key="i"
            @tap="contentType(item)">
            {{item.content_type_name}}
          </view>
        </view>
        <view class="categoryBtns">
          <view class="categoryBtnL" @tap="contentFormShowClose">
            取消
          </view>
          <view class="categoryBtnR" @tap="contentFormBtn">
            确认
          </view>
        </view>
      </view>
    </u-popup>
  </view>


</template>

<script>
  import mpvueCityPicker from '../../components/mpvue-citypicker/mpvueCityPicker.vue'
  import mpvueCityPicker1 from '../../components/mpvue-citypicker/mpvueCityPicker1.vue'
  export default {
    data() {
      return {
		loadState: false,
        shanchushow: false,
        isOneQrCode: false,
        isTwoQrCode: false,
        isThreeQrCode: false,
        gradeShow: false,
        contentFormShow: false,
        categoryShow: false,
        value: false,
        msg: '不公开',
        sales_level: '请选择',
        content_level: '请选择',
        content_type_name: '请选择擅长内容形式',
        accept_content_type_name: '请选择内容形式',
        category_name: '请选择优势品类',
        // 创建名片数据
        create_card: {
          dy_nickname: '',
          dy_id: '',
          province: '',
          city: '',
          area: '',
          gender: '1',
          fans_num: '',
          sales_level: '',
          content_level: '',
          content_type_id: '',
          category_id: '',
        },
        // 创建名片详情数据
        create_card_detail: {
          card_id: '',
          dy_uid: '',
          home_url: '',
          phone: '',
          phone_state: '',
          detail: '',
          fans_img_url: '',
          sales_level_img: '',
          content_level_img: '',
          example_img: '',
          accept_content_type_id: '',
          service_price: '',
          service_price_state: '0',
          video_num: '',
          price: '',
          remark: '',
        },
        gradeColumns: [
          [{
              label: 'Lv0',
              id: 0
            },
            {
              label: 'Lv1',
              id: 1
            }, {
              label: 'Lv2',
              id: 2
            }, {
              label: 'Lv3',
              id: 3
            }, {
              label: 'Lv4',
              id: 4
            }, {
              label: 'Lv5',
              id: 5
            }, {
              label: 'Lv6',
              id: 6
            }, {
              label: 'Lv7',
              id: 7
            }
          ]
        ],
        content_data: [],
        categoryList: [],
        formType: '',
        fileList1: [],
      };
    },
    onShow() {
      this.get_choose_data()
    },
    onLoad(obj) {
      this.user_id = obj.user_id
      this.commonName = obj.nickname
    },
    components: {
      mpvueCityPicker,
      mpvueCityPicker1
    },
    methods: {
      // 删除图片
      deletePic(event) {
        this[`fileList${event.name}`].splice(event.index, 1)
      },
      // 新增图片
      async afterRead(event) {
        // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
        let lists = [].concat(event.file)
        let fileListLen = this[`fileList${event.name}`].length
        lists.map((item) => {
          this[`fileList${event.name}`].push({
            ...item,
            status: 'uploading',
            message: '上传中'
          })
        })
        for (let i = 0; i < lists.length; i++) {
          const result = await this.uploadFilePromise(lists[i].url)
          let item = this[`fileList${event.name}`][fileListLen]
          this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
            status: 'success',
            message: '',
            url: result
          }))
          fileListLen++
        }
      },
      uploadFilePromise(url) {
        const _this = this;
        return new Promise((resolve, reject) => {
          let a = uni.uploadFile({
            url: 'https://skdjmwj99.bxsmmcy.com/api/others/upload_evaluate', //开发者服务器 url
            header: {
              'token': uni.getStorageSync('token')
              // 'token': '97e8f791-13a5-4fc0-ae8e-9877abce1234'
            },
            filePath: url,
            name: 'file',
            formData: {
              user: 'test'
            },
            success: (res) => {
              console.log(res);
              setTimeout(() => {
                resolve(res.data.data)
              }, 1000)
              var result = JSON.parse(res.data)
              if (result.code == 1) {
                _this.create_card_detail.example_img = result.data.url
              }
            }
          });
        })
      },
      // 点击图片上传
      upImg(n) {
        // n为1的时候是粉丝画像图片  2上传带货力等级图片 3内容力等级图片
        this.imgType = n
        const _this = this;
        uni.chooseImage({
          count: 1, //最多可以选择的图片张数，默认9
          sourceType: ['album'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
          sizeType: ['original'], //original 原图，compressed 压缩图，默认二者都有
          success(res) {
            // 调用上传图片的接口
            console.log(res);
            _this.uploadPhoto(res.tempFilePaths);
          },
        })

      },
      uploadPhoto(tempFilePaths) {
        console.log(tempFilePaths[0]);
        const that = this;
        uni.uploadFile({
          url: 'https://skdjmwj99.bxsmmcy.com/api/others/upload_evaluate', //开发者服务器 url
          header: {
            'token': uni.getStorageSync('token')
            // 'token': '97e8f791-13a5-4fc0-ae8e-9877abce1234'
          },
          filePath: tempFilePaths[0], // 要上传文件资源的路径
          name: 'file', // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
          success(res) {
            console.log(res);
            var result = JSON.parse(res.data)
            if (result.code != 1) {
              that.toast.msg(res.msg)
              return
            }
            if (that.imgType == 1) {
              that.create_card_detail.fans_img_url = result.data.url
              that.isOneQrCode = true
            }
            if (that.imgType == 2) {
              that.create_card_detail.sales_level_img = result.data.url
              that.isTwoQrCode = true
            }
            if (that.imgType == 3) {
              that.create_card_detail.content_level_img = result.data.url
              that.isThreeQrCode = true
            }
          },
        })
      },
      genderBtn(n, index) {
        this.create_order_anchor[index].gender = n
        this.gender = n
      },
      order_remunerate_btn(i, index) {
        this.remunerate_type_data.forEach((item) => {
          if (i.id == item.id) {
            item.flag = true
            this.create_order_anchor[index].order_remunerate_id = i.id
          } else {
            item.flag = false
          }
        })
      },
      salesCycleBtn(index) {
        this.salesCycle = !this.salesCycle
        if (this.salesCycle == true) {
          this.create_order_anchor[index].sales_level = 0
          this.sales_level = ''
        } else {
          this.create_order_anchor[index].sales_level = ''
        }
      },
      contentCycleBtn(index) {
        this.contentCycle = !this.contentCycle
        if (this.contentCycle == true) {
          this.create_order_anchor[index].content_level = 0
          this.content_level = ''
        } else {
          this.create_order_anchor[index].content_level = ''
        }
      },
      grade(n) {
        this.gradetype = n
        this.gradeShow = true
      },
      gradeConfirm(e) {
        if (this.gradetype == 1) {
          this.create_card.sales_level = e.value[0].id
          this.sales_level = e.value[0].label
        }
        if (this.gradetype == 2) {
          this.create_card.content_level = e.value[0].id
          this.content_level = e.value[0].label
        }
        this.gradeShow = false
      },
      addPeople() {
        this.create_order_anchor.push({
          sales_level: '', //带货力等级，1~7，0为不限
          content_level: '', //内容力等级，1~7，0为不限
          fans_num: '', //粉丝量
          level_recruit_num: '', //该等级招募人数
          order_remunerate_id: '', //商单报酬ID
          service_price: '', //服务费
          price: '', //佣金
          gender: '0', //性别，1：男，2：女，0：不限
          remark: '' //备注
        })
      },
      // 1，创建名片
      async createCardBtn() {
		this.loadState = true;
        const {
          data: res
        } = await uni.$http.post('create_anchor_card/create_card', this.create_card)
        if (res.code != 1) {
		  this.loadState = false;
          this.toast.msg(res.msg)
          return
        }
        this.create_card_detail.card_id = res.data.card_id
        this.createCardDetailBtn()

      },
      // 2、创建达人详情
      async createCardDetailBtn() {
        const {
          data: res
        } = await uni.$http.post('create_anchor_card/create_card_detail', this.create_card_detail)
        if (res.code != 1) {
		  this.loadState = false;
          this.toast.msg(res.msg)
          return
        }
		this.loadState = false;
        uni.showToast({
          icon: 'success',
          title: '创建成功',
          duration: 2000
        })
        setTimeout(() => {
          uni.switchTab({
            url: "/pages/people/people"
          })
        }, 2000)
      },

      remunerateBtn(index) {
        this.remunerate_type_name = index.value[0].remunerate_type_name
        this.create_order.order_remunerate_id = index.value[0].id
        this.remunerateShow = false
      },
      async get_choose_data() {
        const {
          data: res
        } = await uni.$http.post('index/get_choose_data', {
          type: 1
        })
        if (res.code != 1) {
          this.toast.msg(res.msg)
        }
        res.data.category_data.forEach((item) => {
          item.flag = false
        })
        res.data.chain_type_data.forEach((item) => {
          item.flag = false
        })
        res.data.remunerate_type_data.forEach((item) => {
          item.flag = false
        })
        res.data.content_data.forEach((item) => {
          item.flag = false
        })
        this.categoryList = res.data.category_data
        this.content_data = res.data.content_data
      },
      // 实现品类单选
      selectTag(i) {
        this.categoryList.forEach((item) => {
          if (i.id == item.id) {
            item.flag = true
            this.create_card.category_id = i.id
            this.category_name = i.category_name
          } else {
            item.flag = false
          }
        })
      },
      contentFormShowBtn(n) {
        this.formType = n
        this.contentFormShow = true
      },
      // 实现内容形式多选
      contentType(i) {
        i.flag = !i.flag
        // 等于1是擅长的内容形式
        if (this.formType == 1) {
          this.content_type_name = ''
          this.content_data.forEach((item) => {
            if (i.id == item.id && item.flag == true) {
              this.create_card.content_type_id += item.id
            }
            if (item.flag == true) {
              this.content_type_name += item.content_type_name + ' '
            }
          })
          let newStr = ''
          for (let i = 0; i < this.create_card.content_type_id.length; i++) {
            // 判断如果newStr里没有匹配的字符，
            if (newStr.search(this.create_card.content_type_id[i]) == -1)
              // 就将该字符追加到newStr里
              newStr += this.create_card.content_type_id[i] + ',';
          }
          this.create_card.content_type_id = newStr.substring(0, newStr.lastIndexOf(','))
        }
        // 等于2是详情的内容形式
        if (this.formType == 2) {
          this.create_card_detail.accept_content_type_id = ''
          this.accept_content_type_name = ''
          this.content_data.forEach((item) => {
            if (i.id == item.id && item.flag == true) {
              this.create_card_detail.accept_content_type_id += item.id + ','
            }
            if (item.flag == true) {
              this.accept_content_type_name += item.content_type_name + ' '
            }
          })
          this.create_card_detail.accept_content_type_id = this.create_card_detail.accept_content_type_id.substring(0,
            this.create_card_detail.accept_content_type_id.lastIndexOf(','))
        }
      },
      // 实现商单报酬单选
      remunerateType(i) {
        this.content_data.forEach((item) => {
          if (i.id == item.id) {
            item.flag = true
            this.create_order.content_type_id = i.id
            this.content_type_name = i.content_type_name
          } else {
            item.flag = false
          }
        })
      },
      // 实现是否连锁
      radioBtn(i) {
        this.chain_type_data.forEach((item) => {
          if (i.id == item.id) {
            item.flag = true
            this.create_order.chain_type_id = i.id
          } else {
            item.flag = false
          }
        })
      },
      category() {
        this.categoryShow = false
      },

      contentFormBtn() {
        this.content_data.forEach((item) => {
          item.flag = false
        })
        this.contentFormShow = false
      },
      // 品类选择框关闭
      categoryShowClose() {
        this.categoryShow = false
        this.category_name = '请选择品类'
        this.create_order.category_id = ''
      },
      // 内容形式选择框关闭
      contentFormShowClose() {
        this.contentFormShow = false
        this.content_type_name = ''
        this.create_order.content_type_id = ''
      },
      // 打开地址选择
      showCityPicker() {
        this.$refs.mpvueCityPicker.show()
      },
      // 打开地址选择
      showCityTwo() {
        console.log(111);
        this.$refs.mpvueCityPickerTwo.show()
      },
      onConfirm(e) {
        const arr = e.label.split("-")
        this.create_card.province = arr[0]
        this.create_card.city = arr[1]
        this.create_card.area = arr[2]
      },
      onConfirmTwo(e) {
        const arr = e.label.split("-")
        this.create_order.city_data = arr[1]
      },
      asyncChange(e) {
        this.value13 = e
        if (this.value13 == false) {
          this.msg = '不公开'
          this.create_order.store_state = 0
        }
        if (this.value13 == true) {
          this.msg = '公开'
          this.create_order.store_state = 1
        }
      },
      asyncChangeTwo(e) {
        this.value = e
        if (this.value == false) {
          this.msg = '不公开'
          this.create_card_detail.phone_state = 0
        }
        if (this.value == true) {
          this.msg = '公开'
          this.create_card_detail.phone_state = 1
        }
      },
      asyncChangeThree(e) {
        this.value15 = e
        if (this.value15 == false) {
          this.create_order_detail.is_flow = 0
        }
        if (this.value15 == true) {
          this.create_order_detail.is_flow = 1
        }
      },
      // 添加门店信息表单
      addShop() {
        this.shopInfo.push({
          store_name: "", //门店名称
          province: "", //省
          city: "", //市
          area: "", //区
          address: "", //详细地址
          contacts_name: "", //联系人
          contacts_phone: "" //联系电话
        })
      },
      // 创建商单门店信息
      async create_order_store() {
        const {
          data: res
        } = await uni.$http.post('create_order/create_order_store', this.shopInfo)
        if (res.data != 1) {
          this.toast.msg(res.msg)
        }
      },
      // 删除门店信息表单
      deleted(index) {
        if (this.shopInfo.length > 1) {
          this.shopInfo.splice(index, 1);
        }
      },
      // 删除达人信息表单
      deletedAnchor(index) {
        if (this.create_order_anchor.length > 1) {
          this.create_order_anchor.splice(index, 1);
        }
      },
      recruitCycleBtn(n) {
        this.recruitCycle = !this.recruitCycle
        if (this.recruitCycle == true) {
          this.create_order.recruit_start_time = '0'
          this.create_order.recruit_end_time = '0'
        }
      },
      exploringCycleBtn(n) {
        this.exploringCycle = !this.exploringCycle
        if (this.exploringCycle == true) {
          this.create_order_detail.exploring_start_time = '0'
          this.create_order_detail.exploring_end_time = '0'
        }
      },
      showCycleBtn(n) {
        this.showCycle = !this.showCycle
        if (this.showCycle == true) {
          this.create_order_detail.show_start_time = '0'
          this.create_order_detail.show_end_time = '0'
        }
      },
      goodsCycleBtn(n) {
        this.goodsCycle = !this.goodsCycle
        if (this.goodsCycle == true) {
          this.create_order_detail.goods_start_time = '0'
          this.create_order_detail.goods_end_time = '0'
        }
      },
      recruitNumberBtn(n) {
        this.recruitNumber = !this.recruitNumber
        if (this.recruitNumber == true) {
          this.create_order.recruit_num = '0'
        } else {
          this.create_order.recruit_num = ''
        }
      },
      exploringNumBtn(n) {
        this.exploringNum = !this.exploringNum
        if (this.exploringNum == true) {
          this.create_order_detail.exploring_num = '0'
        } else {
          this.create_order_detail.exploring_num = ''
        }
      },
      // 判断招募周期或探店周期
      cycle(n) {
        this.cycleType = n
        this.canlendarShow = true
      },
      // 选择日期范围
      calendarBtn(e) {
        console.log(e);
        // cycleType == 1是 招募周期 == 2是探店周期
        if (this.cycleType == 1) {
          this.create_order.recruit_start_time = e[0]
          this.create_order.recruit_end_time = e[e.length - 1]
        }
        if (this.cycleType == 2) {
          this.create_order_detail.exploring_start_time = e[0]
          this.create_order_detail.exploring_end_time = e[e.length - 1]
        }
        if (this.cycleType == 3) {
          this.create_order_detail.show_start_time = e[0]
          this.create_order_detail.show_end_time = e[e.length - 1]
        }
        if (this.cycleType == 4) {
          this.create_order_detail.goods_start_time = e[0]
          this.create_order_detail.goods_end_time = e[e.length - 1]
        }
        this.canlendarShow = false
      },
      goCoCreate() {
        uni.navigateTo({
          url: '../coCreate/coCreate'
        })
      },
      shanchu() {
        uni.navigateTo({
          url: '../add/add'
        })
      }
    }
  }
</script>

<style lang="scss">
  .content {
    min-height: 100vh;
    background-color: #F2F3F6;
    padding-top: 32rpx;

    .bottomItem {
      box-sizing: border-box;
      padding-right: 40rpx;
      display: flex;
      align-items: center;
      height: 110rpx;
      border-bottom: 2rpx solid #EDEFF2;
      font-size: 28rpx;
      color: #000;

      .bottomItemName {
        flex: 1;
      }

      .addImg {
        width: 48rpx;
        height: 48rpx;
      }

      .radioImg {
        width: 36rpx;
        height: 36rpx;
        margin-right: 16rpx;
      }

    }


    .radioImg {
      width: 36rpx;
      height: 36rpx;
      margin-right: 16rpx;
      vertical-align: middle;
    }

    .red {
      color: #E64F5E;
    }

    .businessBox {
      font-size: 28rpx;
      box-sizing: border-box;
      width: 100%;
      background-color: #fff;
      padding-left: 40rpx;
      margin-bottom: 24rpx;

      .addPeopleCardBtn {
        width: 338rpx;
        height: 78rpx;
        border: 2rpx solid #7D81A9;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        color: #7D81A9;
        font-size: 28rpx;
        border: 2rpx solid #7D81A9;

        image {
          width: 26rpx;
          height: 26rpx;
          margin-right: 8rpx;
        }
      }

      .rightFillImg {
        width: 12rpx;
        height: 12rpx;
        margin-left: 16rpx;
      }

      .businessTitle {
        height: 100rpx;
        line-height: 100rpx;
        font-size: 32rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 600;
        color: #000000;
      }

      .businessItem {
        box-sizing: border-box;
        padding-right: 40rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 108rpx;
        line-height: 108rpx;
        border-bottom: 2rpx solid #EDEFF2;

        .rBox {
          display: flex;
          align-items: center;

          .addimg {
            width: 42rpx;
            height: 42rpx;
          }

          .inviteBtn {
            // font-size: 24rpx;
            width: 128rpx;
            height: 52rpx;
            line-height: 52rpx;
            text-align: center;
            background: rgba(125, 129, 169, 0.1);
            border-radius: 40rpx;
            color: #7D81A9;
            margin-left: 8rpx;
          }



          .radioImg {
            width: 36rpx;
            height: 36rpx;
            margin-right: 16rpx;
            vertical-align: middle;
          }
        }
      }

      .shopCard {
        box-sizing: border-box;
        width: 670rpx;
        // height: 714rpx;
        background: linear-gradient(135deg, #F2F3F6 0%, rgba(242, 243, 246, 0) 100%);
        border-radius: 16rpx;
        padding: 0 32rpx;
        margin-bottom: 32rpx;

        .deleteBtn {
          position: relative;
          height: 66rpx;

          .deleteImg {
            position: absolute;
            top: 28rpx;
            right: 28rpx;
            width: 32rpx;
            height: 32rpx;
          }
        }

        .shopCardItem {
          box-sizing: border-box;
          padding: 0 8rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 108rpx;
          line-height: 108rpx;
          border-bottom: 2rpx solid rgba(0, 0, 0, 0.05);

          .rBox {
            display: flex;
            align-items: center;

            .addimg {
              width: 48rpx;
              height: 48rpx;
              margin-left: 16rpx;
            }
          }

          /deep/.u-switch {
            width: 76rpx;
            height: 44rpx;
            margin: 0 10rpx;
          }
        }

        .ewm {
          height: 200rpx !important;
        }

      }

      .shopBox {
        padding-bottom: 40rpx;
        margin-bottom: 16rpx;

        .shopTitle {
          box-sizing: border-box;
          height: 98rpx;
          line-height: 98rpx;
        }

        .addShopCardBtn {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 226rpx;
          height: 78rpx;
          margin: 0 auto;
          color: #7D81A9;
          font-size: 28rpx;
          border: 2rpx solid #7D81A9;

          image {
            width: 26rpx;
            height: 26rpx;
            margin-right: 8rpx;
          }
        }
      }

      .orderCard {
        width: 670rpx;
        background: linear-gradient(135deg, #F2F3F6 0%, rgba(242, 243, 246, 0) 100%);
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        margin-bottom: 34rpx;
      }
    }

    .miniCard {
      box-sizing: border-box;
      padding: 0 24rpx;
      width: 670rpx;
      // height: 332rpx;
      background: linear-gradient(135deg, #F2F3F6 0%, rgba(242, 243, 246, 0) 100%);
      border-radius: 16rpx;
      margin-top: 32rpx;

      .miniCardItem {
        display: flex;
        align-items: center;
        height: 110rpx;
        border-bottom: 2rpx solid #EDEFF2;
        font-size: 28rpx;
        color: #000;

        .miniCardItemName {
          flex: 1;
        }

        .addImg {
          width: 48rpx;
          height: 48rpx;
        }

        .radioImg {
          width: 36rpx;
          height: 36rpx;
          margin-right: 16rpx;
        }

      }
    }


    .vertical {
      width: 2rpx;
      height: 36rpx;
      background: rgba(0, 0, 0, 0.1);
      border-radius: 4rpx 4rpx 4rpx 4rpx;
      margin: 0 34rpx;
    }

    .baochouBox {
      position: relative;
      height: 170rpx;

      .lable {
        position: absolute;
        top: 34rpx;
        left: 8rpx;
      }

      .baochou {
        // flex: 1;
        width: 75%;
        height: 100%;
        position: absolute;
        top: 0rpx;
        left: 150rpx;
        border-bottom: 2rpx solid #EDEFF2;
        padding-top: 30rpx;

        view {
          display: inline-block;
          margin-left: 30rpx;
        }

        .Zhihuan:nth-child(3) {
          position: absolute;
          left: -60rpx;
          top: 96rpx;
        }

        .Zhihuan:nth-child(4) {
          position: absolute;
          left: 80rpx;
          top: 96rpx;
        }

        .ipt {
          width: 170rpx;
          position: absolute;
          top: 96rpx;
          right: 0rpx;
          height: 40rpx;
        }
      }

      .radioImg {
        margin-right: 16rpx;
      }
    }

    .upImg {
      text-align: center;
      line-height: 52rpx;
      width: 128rpx;
      height: 52rpx;
      background: rgba(125, 129, 169, 0.1);
      border-radius: 40rpx 40rpx 40rpx 40rpx;
      font-size: 24rpx;
      color: #7D81A9;
    }

    .txt_word {
      box-sizing: border-box;
      word-wrap: break-word;
      white-space: pre-line;
      width: 670rpx;
      height: 168rpx;
      background: #F2F3F6;
      border-radius: 8rpx;
      padding: 16rpx 20rpx;
    }

    .askTitle {
      margin: 32rpx 0 16rpx 0;
    }

    .bottomBox {
      margin-top: 16rpx;
      box-sizing: border-box;
      padding-top: 24rpx;
      width: 100%;
      height: 216rpx;
      background: #FFFFFF;
      border-radius: 28rpx 28rpx 0rpx 0rpx;

      .bottomTitle {
        margin-bottom: 16rpx;
        text-align: center;
        font-size: 24rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        color: #EAA04A;
      }

      .btns {
        width: 662rpx;
        margin: 0 auto;

        view {
          box-sizing: border-box;
          display: inline-block;
          width: 320rpx;
          height: 80rpx;
          line-height: 80rpx;
          text-align: center;
          font-size: 28rpx;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
        }

        .deleteBtn {
          margin-right: 22rpx;
          color: #7D81A9;
          border-radius: 40rpx;
          border: 2rpx solid rgba(125, 129, 169, 0.3);
        }

        .confirmBtn {
          background: #7D81A9;
          border-radius: 40rpx;
          color: #FFFFFF;
        }
      }
    }

    .categoryShowContent {
      padding: 38rpx 32rpx;

      .categoryList {
        margin-top: 40rpx;

        .categoryItem {
          display: inline-block;
          width: 150rpx;
          height: 64rpx;
          line-height: 64rpx;
          text-align: center;
          background: #F2F3F6;
          border-radius: 200rpx;
          font-size: 28rpx;
          margin-right: 22rpx;
          margin-bottom: 32rpx;
          color: #333;
        }


        .active {
          background-color: #7D81A9;
          color: #FFFFFF;
        }

        .categoryItem:nth-child(4n) {
          margin-right: 0;
        }
      }

      .categoryBtns {
        display: flex;
        margin-top: 60rpx;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        font-size: 28rpx;
        font-weight: 500;

        .categoryBtnL {
          box-sizing: border-box;
          width: 320rpx;
          height: 80rpx;
          border-radius: 40rpx;
          border: 2rpx solid rgba(125, 129, 169, 0.3);
          color: #7D81A9;
          margin-right: 22rpx;
        }

        .categoryBtnR {
          width: 320rpx;
          height: 80rpx;
          color: #FFFFFF;
          background: #7D81A9;
          border-radius: 40rpx;
        }
      }
    }

    .oneBusinessItem {
      /deep/ .u-input {
        width: 350rpx !important;
      }
    }

    /deep/.u-modal_content_text {
      text-align: center;
    }

    .ewm {
      height: 200rpx !important;
    }
  }
</style>